<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>魏远商城</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<link rel="shortcut icon" href="/favicon.ico">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/my-order.css" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/my-logistics.css" />
		<style type="text/css">
			.wuliud {
				/*border-bottom: 1px dashed;*/
				width: 100%;
			}
			
			.wuliud>div {
				float: left;
			}
			
			.wuliud>div:nth-child(1) {
				width: 5%;
			}
			
			.yuandian {
				display: inline-block;
				padding: 5px;
				/* height: 100%; */
				border-radius: 100%;
				background: #e9af29;
				margin-left: 1.2px;
				margin-bottom: 3px;
				box-shadow: 0px 0px 0.1px 3px rgba(233, 175, 41, 0.4);
			}
			
			.yuandian1 {
				display: inline-block;
				padding: 5px;
				margin-bottom: 3px;
				border-radius: 100%;
				background: #999;
				margin-left: 1.2px;
			}
			/*.wuliud>div:nth-child(1)>span:nth-child(2) {
				height: 80px;
				border-left: 1px solid #e9af29;
				display: inline-block;
			}
			*/
			/*.wuliud:after {
				content: "";
				display: table;
				height: 0;
				clear: both;
				visibility: hidden
			}*/
			
			.wuliud>div:nth-child(2) {
				margin-bottom: 13px;
				width: 92%;
				border-bottom: 1px solid #eee;
			}
			
			.a {
				margin-right: 6px;
				/*height: 60px;*/
				padding: -2px;
				width: 6px;
				display: inline-block;
				border-right: 1px solid #bbb;
			}
			
			.wuliut {
				margin-bottom: 5px;
			}
			
			.wuliuw {
				margin-bottom: 5px;
			}
			
			.phone {
				color: #7d0000!important;
			}
			.wuliud,.top-ri{
				color: #6f6f6f;
			}
			.complan,.number{
				color: #151515!important;
			}
			.he{
				font-size: 14px;
			}
			/*.top-ri>p:nth-child(3){
				padding-bottom: 0px!important;
			}*/
		</style>
	</head>

	<body style="background: white;">
		<header class="bar bar-nav return-header" style="width: 100%;">
			<span class="order-back mui-action-back"><img src="img/back-le.png" height="50%"/></span>
			<h1 class="title"style="line-height: 2.2rem;">物流详情</h1>
		</header>
		<div class="mui-content">
			<!--<div class="buttom">
				<span>本数据是魏远商场提供</span>
			</div>-->
			<div class="top">
				<!--<div class="top-le"><img src="img/cabbage.png"/></div>-->
				<div class="top-ri">
					<p>承运公司：<span class="complan"></span></p>
					<p>运单编号：<span class="number"></span></p>
					<p>承运公司电话：<span class="phone"></span></p>
					<!--<p>物流状态：</p>-->
					<div class="wuliutai" style="width: 96%;margin:.5rem auto;">
						<!--<div class="wuliud">
			    			<p class="wuliuw"></p>
			    			<p class="wuliut"></p>
		    			</div>-->
					</div>
					<!--<div class="wuliutai" style="width: 96%;margin:1rem auto;">
						<div class="wuliud">
							<div><span class="yuandian"></span><span class="a"></span></div>
							<div>
								<p class="wuliuw">"[广东广州天河区东圃公司广氮中侨便民服务站]快件已被 已签收 签收"</p>
								<p class="wuliut">"2017-03-16 18:38:56"</p>
							</div>
						</div>
						<div class="wuliud">
							<div><span class="yuandian1"></span><span class="a"></span></div>
							<div>
								<p class="wuliuw">"[广东广州天河区东圃公司广氮中侨便民服务站]进行派件扫描；派送业务员：朱述明；联系电话：13060607877"</p>
								<p class="wuliut">"2017-03-16 18:37:54"</p>
							</div>
						</div>
						<div class="wuliud">
							<div><span class="yuandian1"></span><span class="a"></span></div>
							<div>
								<p class="wuliuw">"[广东广州白云区马务公司]进行揽件扫描"</p>
								<p class="wuliut">"2017-03-15 12:03:03"</p>
							</div>
						</div>
						<div class="wuliud">
							<div><span class="yuandian1"></span><span class="a"></span></div>
							<div>
								<p class="wuliuw">"[广东广州天河区东圃公司]进行快件扫描，将发往：广东广州天河区东圃公司广氮分部"</p>
								<p class="wuliut">"2017-03-15 08:13:46"</p>
							</div>
						</div>
						<div class="wuliud">
							<div><span class="yuandian1"></span><span class="a"></span></div>
							<div>
								<p class="wuliuw">"[广东广州分拨中心]从站点发出，本次转运目的地：广东广州天河区东圃公司"</p>
								<p class="wuliut">"2017-03-15 04:10:49"</p>
							</div>
						</div>
						<div class="wuliud">
							<div><span class="yuandian1"></span></div>
							<div>
								<p class="wuliuw">"[广东广州分拨中心]在分拨中心进行称重扫描"</p>
								<p class="wuliut">"2017-03-15 03:19:17"</p>
							</div>
						</div>
						<div class="wuliud">
							<div><span class="yuandian1"></span></div>
							<div>
								<p class="wuliuw">"[广东广州白云区马务公司]进行下级地点扫描，将发往：广东广州网点包"</p>
								<p class="wuliut">"2017-03-15 02:09:08"</p>
							</div>
						</div>
						<div class="wuliud">
							<div><span class="yuandian1"></span></div>
							<div>
								<p class="wuliuw">"[广东广州白云区马务公司]进行揽件扫描"</p>
								<p class="wuliut">"2017-03-14 12:03:03"</p>
							</div>
						</div>
					</div>-->
				</div>
			</div>
		</div>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/url.js"></script>
		<script type="text/javascript">
			listinfor();
			function listinfor() {
				$.ajax({
					url: ur + '/mobilemember/frontOrder/getOrderShipInfo',
					type: 'POST',
					headers: {
						"X-Token": localStorage.token
					},
					dataType: 'json',
					data: {
						"orderVO.id": localStorage.lookorderid,
						//						"orderVO.id": localStorage.lookorderid,
						/*"id": '40288051594f367a015963128b240033',*/
					},
					success: function(data) {
						//						all.fadeOut(1000);
						//						mui.toast('删除成功');
						if(data.result.meta.code == 201) {
							$('.top-ri').css('display', 'none');
							var tips = $('<p>暂时没有物流信息</p>');
							$('.top').append(tips);
						} else if(data.result.meta.code == 200) {
							console.log(JSON.stringify(data))
							$('.complan').text(data.result.data.showapi_res_body.expTextName);
							$('.number').text(data.result.data.showapi_res_body.mailNo);
							$('.phone').text(data.result.data.showapi_res_body.tel);
							//                       	$('.wuliutai').text(JSON.stringify(data.result.data.showapi_res_body.data[2].context));
							var le = data.result.data.showapi_res_body.data;
							console.log(le)
							for(var i = 0; i < data.result.data.showapi_res_body.data.length; i++) {
								var context = replaceAll(JSON.stringify(data.result.data.showapi_res_body.data[i].context), '"', '');
								var time = replaceAll(JSON.stringify(data.result.data.showapi_res_body.data[i].time), '"', '');
								if(i == 0) {
									var divp = $('<div class="wuliud">' +
										'<div><span class="yuandian"></span><span class="a"></span></div>' +
										'<div class="he">' +
										'<p class="wuliuw">' + context + '</p>' +
										'<p class="wuliut">' + time + '</p>' +
										'</div>' +
										'</div>')
									$('.wuliutai').append(divp);
									$('.wuliuw').css('color','#151515')
									$('.wuliut').css('color','#151515')
									$('.a').eq(i).css('height', ($('.he').eq(i).height() - 10) + 'px')
									console.log($('.he').eq(i).height() + "gaodu")
								} else if(i == data.result.data.showapi_res_body.data.length - 1) {
									var divp = $('<div class="wuliud">' +
										'<div><span class="yuandian1"></span><span class=""></span></div>' +
										'<div class="he">' +
										'<p class="wuliuw">' + context + '</p>' +
										'<p class="wuliut">' + JSON.stringify(data.result.data.showapi_res_body.data[i].time) + '</p>' +
										'</div>' +
										'</div>')
									$('.wuliutai').append(divp);
									$('.a').eq(i).css('height', '0px')
								} else {
									var divp = $('<div class="wuliud">' +
										'<div><span class="yuandian1"></span><span class="a"></span></div>' +
										'<div class="he">' +
										'<p class="wuliuw">' + context + '</p>' +
										'<p class="wuliut">' + JSON.stringify(data.result.data.showapi_res_body.data[i].time) + '</p>' +
										'</div>' +
										'</div>')
									$('.wuliutai').append(divp);
									$('.a').eq(i).css('height', ($('.he').eq(i).height() - 10) + 'px')
								}
							}
						}
					},
					error: function(data) {
						console.log(data);
					}
				})
			}

			function replaceAll(str, replaceKey, replaceVal) {
				var reg = new RegExp(replaceKey, 'g'); //g就是代表全部 
				return str.replace(reg, replaceVal || '');
			}
		</script>
	</body>

</html>